
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据字典</title>
    <script src="../../../res/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../../../res/layui/css/pulas.css" media="all">
</head>
<body>
<div class="demoTable">
    <div class="layui-inline">
        <input class="labtna" name="materialName" id="materialName" autocomplete="off" placeholder="输入关键字">
    </div>

    <input type="hidden" id="materialId" name="materialId">

    <div class="layui-inline layui-form">
        <select name="typeId" id="typeId"  class="labtna"  lay-filter="brickType">
            <option value="">
                选择类型
            </option>
        </select>
    </div>

    <button class="latn" data-type="reload" id="axt">刷新</button>
    <button class="latn" id="materialsAdd" data-type="add">增加</button>

</div>
<table class="layui-hide" id="materials" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="imgUpdate">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="../../../res/js/base.js"></script>
<script src="../../../res/layui/layui.js"></script>
<script>

    layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
             layer = layui.layer //弹层
            ,table = layui.table //表格
            ,upload = layui.upload //上传
            ,form=layui.form
            ,element = layui.element; //元素操作
        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.msg('切换了：'+ this.innerHTML);
            console.log(data);
        });

        //执行一个 table 实例
        table.render({
            elem: '#materials'
            ,height: 490
            ,url: '/hqDatadic/selectAll' //数据接口
            ,page: true //开启分页
            ,method:'post'
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'},
                 {field: 'dicId', title: 'dicID', width:120, fixed: 'left'}
                ,{field: 'dicEncoding', title: '字典编码', width:164}
                ,{field: 'dicName', title: '字典名称', width:164}
                ,{field: 'dicType', title: '字典类型', width:164}
                ,{field: 'remark', title: '信息', width:164}
                ,{field: 'oper', title: '禁忌', width:164}
                ,{fixed: 'right',title: '操作', width: 225, align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
        });

        //监听工具条
        table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                var matId=data.dicId;
                layer.confirm('确认删除？', function(index){
                    layer.close(index);
                    var url = "/hqDatadic/deleteById";
                    var data={id:matId};
                    $.post(url,data,function(mes){
                        layer.msg(mes.message);
                        table.reload("testReload");
                    },"json");
                });
            } else if(layEvent === 'edit'){
                layer.open({
                    type: 	2,
                    area : ['80%' , '85%'],//弹出框大小
                    shift:1,//弹出框动画效果
                    content: ['datadics.html','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    success:function(layero,index){
                        var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系
                        var iframeWin = window[layero.find('iframe')[0]['name']];//子页面对象
                        //  console.log(body.html()) //得到iframe页的body内容
                        body.find("#dicId").val(data.dicId);
                        body.find("#dicEncoding").val(data.dicEncoding);
                        body.find("#dicName").val(data.dicName);
                        body.find("#dicType").val(data.dicType);
                        body.find("#remark").val(data.remark);
                        body.find("#oper").val(data.oper);
                    }
                });
            }
        });
        //条件查询
        var $ = layui.$;
        $('.demoTable .layui-btn').on('click', function(){
            var materialName = $('#materialName');
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    materialName: materialName.val()
                }
            });
        });
        $('#materialsAdd').on('click', function(){
            layer.open({
                type: 	2,
                area : ['80%' , '85%'],//弹出框大小
                shift:1,//弹出框动画效果
                content: ['datadics.html','on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
        form.on('select(brickType)', function(data) {
            var val= data.elem[data.elem.selectedIndex].text;
            console.info(val);
            //执行重载
            if(val=="选择类型"){
                val="";
            }
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    dicType: val
                }
            });
            console.info(val);
        });
        $(function () {
            $('#materialName').bind('input propertychange', function() {
                var materialName = $('#materialName');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        materialName: materialName.val()
                    }
                });
            });
            url = "/hqDatadic/selectAt";
            data = null;
            $.get(url,data,function (obj) {
                $.each(obj,function(index,item){
                    $("#typeId").append("<option value="+item.dicId+"> "+item.dicType+"</option>");
                })
                //重新渲染
                form.render('select');
            },"json");

            $("#axt").click(function(){
                window.location.reload();
            })

            var T;
            $(".latn").onmouseover=function(){
                T=setInterval("fmouseOver()", 500);
            }
            $(".latn").onmouseout=function(){
                clearInterval(t);
            }


        })
    });
</script>
</body>
</html>